<template>
  <div id="itemMain" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
import api from '../utils/api';
import { formatUserDate } from '../utils/datetime';

export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  async mounted() {
    let nameList = [];
    let yAxisData1 = [];
    let yAxisData2 = [];
    await api.getJCAJYByPFMarket().then((res) => {
      res.data.forEach((item) => {
        nameList.push(item.sj);
        yAxisData1.push(item.jysum);
        yAxisData2.push(item.jcsum);
      });
    });

    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });

    let color = ['#71F0FA', '#F7E66D'];
    function _getMaxValue(arr) {
      const max = Math.max(...arr);
      // 这样处理是为了不让最大值刚好到坐标轴最顶部
      return Math.ceil(max / 9.5) * 10;
    }
    function _getMinValue(arr) {
      const min = Math.min(...arr);
      // 这样处理是为了不让最大值刚好到坐标轴最底部
      return Math.floor(min / 12) * 10;
    }
    let xAxisData = nameList;

    const min1 = _getMinValue(yAxisData1),
      min2 = _getMinValue(yAxisData2),
      max1 = _getMaxValue(yAxisData1),
      max2 = _getMaxValue(yAxisData2);
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = '';
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
          '0x' + hex.slice(3, 5)
        )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };

    this.option = {
      color: color,
      legend: {
        top: 20,
        right: 'center',
        textStyle: {
          color: 'rgba(255,255,255,1)',
          fontSize: '12',
        },
        icon: 'stack',
        itemWidth: 10,
        itemHeight: 10,
      },
      grid: {
        top: 80,
        bottom: 30,
        containLabel: false,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true,
          //轴线上的字
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: '12',
            },
          },
          data: xAxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          position: 'left',
          min: min1,
          max: max1,
          splitNumber: 5,
          interval: (max1 - min1) / 5,
          name: '交易量（kg）',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: '14',
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40,
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: 'value',
          position: 'right',
          name: '检测量（批次）',
          splitNumber: 5,
          interval: (max2 - min2) / 5,
          min: min2,
          max: max2,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: '14',
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40,
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '交易量',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[0], 0.5),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0.1),
              shadowBlur: 3,
            },
          },
          data: yAxisData1,
          yAxisIndex: 0, // 通过这个判断左右
        },
        {
          name: '检测量',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[1], 0.5),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10,
            },
          },
          data: yAxisData2,
          yAxisIndex: 1, // 通过这个判断左右
        },
      ],
    };
    this.myChart.setOption(this.option);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#itemMain {
  width: 100%;
  height: 100%;
}
</style>
